延續昨天的預告，我們的 HD-2D 地宮在靜態的場景建構與光影表現上已經變成了一個像樣的遊戲畫面。然而，所有的 3D 物件、光影與迷霧，最終都必須透過「攝影機」的鏡頭才能呈現在玩家眼前。 今天，也就是我們「場景建構篇」的最後一步，我們要把這幾天打造的所有心血打包進每秒 60 幀的渲染迴圈（Render Loop）中，完成相機的精準鎖定機制。文末我也將兌現承諾，直接附上這 15 天來去蕪存菁的完整原始碼，讓你能在自己的電腦上親眼見證這座極致精美的地窖廢墟，準備迎接主角的華麗登場！

【Step 1：在渲染迴圈中實作動態鏡頭鎖定（Dynamic Camera Tracking）】

在前幾天當中，我們宣告了 cameraTarget與 cameraOffset，並且在初始化時設定了相機的位置。但是，如果只在初始化時設定一次，當未來遊戲中的主角開始走動時，鏡頭就會停留在原地，眼睜睜看著主角走出畫面。 為了解決這個問題，我們必須在 animate 迴圈中，每一幀都強制更新相機的三維座標

camera.position.copy(cameraTarget).add(cameraOffset);
camera.lookAt(cameraTarget);

這兩行精簡的程式碼是我們未來幾天的護身符。當主角加入場景後，我們完全不需要寫複雜的追蹤運算，只要讓 cameraTarget 的 X 與 Z 座標等於主角的座標，這顆鏡頭就會自動、平滑且精準地跟隨主角在古堡中探險！

【Step 2：呼叫最終渲染與視窗自適應（Resize Handling）】

在鏡頭對焦完畢，且火光也依據時間計算出最新的閃爍亮度後，我們正式呼叫 WebGL 渲染器，將這一幀的畫面壓製並輸出到螢幕上。同時，別忘了啟動視窗尺寸監聽，確保玩家將遊戲放到全螢幕時，這座地城依然保持完美的 HD-2D 比例。

window.addEventListener('resize', () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

實際展示:

為了後續可以讓鏡頭跟著角色移動不破圖，所以選擇把視角拉近到如圖上的距離，當放上角色後可以自由移動時就可以化身冒險者探索地窖的全貌。

完整程式碼:
https://github.com/AlanHuang20/HD_2D_dungeon/blob/main/src/main.js
【本日結語】
隨著場景篇的正式落幕，這座地宮已經完美準備好迎接它的探索者。明天，我們將展開全新的篇章，一步步將代表玩家的 2D 像素紙片人匯入 3D 空間，實作 Billboard 永遠面向鏡頭的技術，並讓他在這座古堡中自由穿梭。大家敬請期待!